<template>
	<div class="body">
		<div style="width: 100%;height: 40px;">
			<div class="select">
				<el-dropdown @command="selectData">
					<el-button type="primary">
					    {{ select }}<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="最近一小时">最近一小时</el-dropdown-item>
						<el-dropdown-item command="今天">今天</el-dropdown-item>
						<el-dropdown-item command="昨天">昨天</el-dropdown-item>
						<el-dropdown-item command="本周">本周</el-dropdown-item>
						<el-dropdown-item command="上周">上周</el-dropdown-item>
						<el-dropdown-item command="近7天">近7天</el-dropdown-item>
						<el-dropdown-item command="近1个月">近1个月</el-dropdown-item>
						<el-dropdown-item command="近1年">近1年</el-dropdown-item>
						<el-dropdown-item command="本月">本月</el-dropdown-item>
						<el-dropdown-item command="上月">上月</el-dropdown-item>
						<el-dropdown-item command="本年">本年</el-dropdown-item>
						<el-dropdown-item command="去年">去年</el-dropdown-item>
						<el-dropdown-item command="自定义时间">自定义时间</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">设备连通性</div>
				  <i id="reflesh" class="el-icon-refresh-right button" @click="reflesh('reflesh')"></i>
				  <div class="chart-container container" id="chart-container"></div>
				  <div class="nd-title2">平均响应时间</div>
				  <div class="nd-time">{{ time }}ms</div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">设备不可达比例(%)</div>
				  <i id="reflesh2" class="el-icon-refresh-right button" @click="reflesh('reflesh2')"></i>
				  <div class="chart-container container2" id="chart-container2"></div>
				  <div style="position: absolute;bottom: 10%;padding: 0 10px 0 10px;width: 98%;">
					  <el-table
						  :data="tableData"
						  border
						  style="width: 100%;height: 100%;">
						  <el-table-column
							prop="max"
							label="最大值"
							width="180">
						  </el-table-column>
						  <el-table-column
							prop="min"
							label="最小值">
						  </el-table-column>
						  <el-table-column
							prop="aver"
							label="平均值">
						  </el-table-column>
						</el-table>
				  </div>
			  </div>
		  </el-col>
		</el-row>
		<div style="width: 100%;height: 20px;"></div>
		<el-row :gutter="20">
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">设备响应时间(ms)</div>
				  <i id="reflesh3" class="el-icon-refresh-right button" @click="reflesh('reflesh3')"></i>
				  <div class="chart-container container2" id="chart-container3"></div>
				  <div style="position: absolute;bottom: 10%;padding: 0 10px 0 10px;width: 98%;">
					  <el-table
						  :data="tableData2"
						  border
						  style="width: 100%;height: 100%;">
						  <el-table-column
							prop="max"
							label="最大值"
							width="180">
						  </el-table-column>
						  <el-table-column
							prop="min"
							label="最小值">
						  </el-table-column>
						  <el-table-column
							prop="aver"
							label="平均值">
						  </el-table-column>
						</el-table>
				  </div>
			  </div>
		  </el-col>
		  <el-col :span="12">
			  <div class="chart">
				  <div class="title">CPU利用率(%)</div>
				  <i id="reflesh4" class="el-icon-refresh-right button" @click="reflesh('reflesh4')"></i>
				  <div class="chart-container container2" id="chart-container4" style="top: 20px;"></div>
				  <div class="table">
					  <el-table
						  :data="tableData3"
						  height="200"
						  border
						  style="width: 100%;height: 100%;">
						  <el-table-column
							prop="date"
							label="监视对象"
							width="210">
						  </el-table-column>
						  <el-table-column
							prop="max"
							label="最大值"
							width="180">
						  </el-table-column>
						  <el-table-column
							prop="min"
							label="最小值">
						  </el-table-column>
						  <el-table-column
							prop="aver"
							label="平均值">
						  </el-table-column>
						</el-table>
				  </div>
			  </div>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
				          max: '1%',
				          min: '0%',
						  aver: '0.5%'
				}],
				tableData2: [{
				          max: '1.000s',
				          min: '0.212s',
						  aver: '0.583s'
				}],
				tableData3: [{
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				        }, {
				          date: '[Frame:0][Slot:13][CPU:0]',
				          max: '29.000',
				          min: '25.000',
						  aver: '27.833'
				}],
				data1:[0.2, 0.32, 0.34, 0.61],
				data2:[120, 192, 134, 210],
				data3_1: [20, 90, 23, 10],
				data3_2: [82, 29, 33, 31],
				data3_3: [32, 19, 30, 41],
				data3_4: [32, 33, 45, 90],
				data3_5: [93, 90, 34, 80],
				value: 60,
				time: 0.583,
				select: '最近一小时',
				timer:null
			};
		},
		mounted() {
			var that = this
			that.getData()
			if (that.timer) {
			  clearInterval(that.timer);
			} else {
			  that.timer = setInterval(function(){that.getData()},1000)
			}
		},
		beforeDestroy() {
		    clearInterval(this.timer);
		},
		methods: {
			selectData(command) {
				this.select = command
			},
			getData(){
				this.chart()
				this.chart2()
				this.chart3()
				this.chart4()
				this.value = Math.ceil(Math.random()*10)
				for(let i = 0;i<this.data1.length;i++){
					if(this.data1[i]>=1||this.data1[i]<=0){
						this.data1[i] = 0.5
					}else {
						this.data1[i]+=Math.random()
					}
				}
				for(let i = 0;i<this.data2.length;i++){
					this.data2[i]+=(Math.floor(Math.random()*40)-18)
				}
				for(let i = 0;i<4;i++){
					if(this.data3_1[i]>=97||this.data3_1[i]<=3){
						this.data3_1[i] = 50
					}else {
						this.data3_1[i]+=(Math.floor(Math.random()*6)-3)
					}
					
					if(this.data3_2[i]>=97||this.data3_2[i]<=3){
						this.data3_2[i] = 50
					}else {
						this.data3_2[i]+=(Math.floor(Math.random()*6)-3)
					}
					
					if(this.data3_3[i]>=97||this.data3_3[i]<=3){
						this.data3_3[i] = 50
					}else {
						this.data3_3[i]+=(Math.floor(Math.random()*6)-3)
					}
					
					if(this.data3_4[i]>=97||this.data3_4[i]<=3){
						this.data3_4[i] = 50
					}else {
						this.data3_4[i]+=(Math.floor(Math.random()*6)-3)
					}
					
					if(this.data3_5[i]>=97||this.data3_5[i]<=3){
						this.data3_5[i] = 50
					}else {
						this.data3_5[i]+=(Math.floor(Math.random()*6)-3)
					}
				}
				this.time = 0.58 + (Math.round(Math.random()*3))/1000
			},
			reflesh(id) {
				let reflesh = document.getElementById(id)
				reflesh.classList.add('reflesh')
				setTimeout(() => {
					reflesh.classList.remove('reflesh')
				}, 1000)
			},
			chart() {
				var myChart = this.$echarts.init(document.getElementById('chart-container'), null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				if (myChart== null) { // 如果不存在，就进行初始化。
					myChart= echarts.init(document.getElementById(id));
				}
				var app = {};
				
				var option;
				
				option = {
				  title: {
					text: '不可达比例',
					left: "5%",
					top: "10%"
				  },
				  series: [
				    {
				      type: 'gauge',
					  radius: '80%',
					  center: ['30%', '70%'],
				      startAngle: 180,
				      endAngle: 0,
				      min: 0,
				      max: 100,
				      itemStyle: {
				        color: '#58D9F9',
				        shadowColor: 'rgba(0,138,255,0.45)',
				        shadowBlur: 10,
				        shadowOffsetX: 2,
				        shadowOffsetY: 2
				      },
				      progress: {
				        show: true,
				        roundCap: true,
				        width: 18
				      },
				      pointer: {
				        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
				        length: '75%',
				        width: 16,
				        offsetCenter: [0, '5%']
				      },
				      axisLine: {
				        roundCap: true,
				        lineStyle: {
				          width: 18
				        }
				      },
				      axisTick: {
				        splitNumber: 2,
				        lineStyle: {
				          width: 2,
				          color: '#999'
				        }
				      },
				      splitLine: {
				        length: 12,
				        lineStyle: {
				          width: 3,
				          color: '#999'
				        }
				      },
				      axisLabel: {
				        distance: 30,
				        color: '#999',
				        fontSize: 20
				      },
				      title: {
				        show: false
				      },
				      detail: {
				        backgroundColor: '#fff',
				        borderColor: '#999',
				        borderWidth: 2,
				        width: '60%',
				        lineHeight: 40,
				        height: 33,
				        borderRadius: 8,
				        offsetCenter: [0, '35%'],
				        valueAnimation: true,
				        formatter: function (value) {
				          return '{value|' + value.toFixed(0) + '}{unit|%}';
				        },
				        rich: {
				          value: {
				            fontSize: 40,
				            fontWeight: 'bolder',
				            color: '#777'
				          },
				          unit: {
				            fontSize: 40,
				            color: '#999',
				          }
				        }
				      },
				      data: [
				        {
				          value: this.value
				        }
				      ]
				    }
				  ]
				};
				
				option && myChart.setOption(option);
			},
			chart2(){
				var myChart = this.$echarts.init(document.getElementById('chart-container2'), null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				if (myChart== null) { // 如果不存在，就进行初始化。
					myChart= echarts.init(document.getElementById(id));
				}
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['9:00', '9:15', '9:30', '9:45']
				  },
				  yAxis: {
				    type: 'value',
					min: 0,
					max: 100,
				  },
				  series: [
				    {
				      name: '不可达比例',
				      type: 'line',
				      stack: 'Total',
				      data: this.data1
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			chart3(){
				var myChart = this.$echarts.init(document.getElementById('chart-container3'), null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				if (myChart== null) { // 如果不存在，就进行初始化。
					myChart= echarts.init(document.getElementById(id));
				}
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['9:00', '9:15', '9:30', '9:45']
				  },
				  yAxis: {
				    type: 'value',
				  },
				  series: [
				    {
				      name: '响应时间',
				      type: 'line',
				      stack: 'Total',
				      data: this.data2
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			},
			chart4(){
				var myChart = this.$echarts.init(document.getElementById('chart-container4'), null, {
				  renderer: 'canvas',
				  useDirtyRect: false
				});
				if (myChart== null) { // 如果不存在，就进行初始化。
					myChart= echarts.init(document.getElementById(id));
				}
				var app = {};
				
				var option;
				
				option = {
				  tooltip: {
				    trigger: 'axis'
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['9:00', '9:15', '9:30', '9:45']
				  },
				  yAxis: {
				    type: 'value',
					min: 0,
					max: 100,
				  },
				  series: [
				    {
				      name: 'Email',
				      type: 'line',
				      stack: 'Total',
				      data: this.data3_1
				    },
				    {
				      name: 'Union Ads',
				      type: 'line',
				      data: this.data3_2
				    },
				    {
				      name: 'Video Ads',
				      type: 'line',
				      data: this.data3_3
				    },
				    {
				      name: 'Direct',
				      type: 'line',
				      data: this.data3_4
				    },
				    {
				      name: 'Search Engine',
				      type: 'line',
				      data: this.data3_5
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				  myChart.setOption(option);
				}
				
				window.addEventListener('resize', myChart.resize);
			}
		}
	}
</script>

<style lang = "scss" scoped>
.body {
	padding: 20px;
}
.select {
	position: absolute;
	top: 9px;
	left: 20px;
}
.chart-container {
  position: absolute;
  top: 50px;
  overflow: hidden;
  margin: auto;
}
.container {
	width: 90%;
	height: 90%;
}
.container2 {
	width: 90%;
	height: 50%;
}
.chart {
	position: relative;
	margin: auto;
	width: 100%;
	height: 456px;
	border-radius: 8px;
	background-color: rgba(241, 243, 245, 1);
	border: 1px solid rgba(213, 213, 211, 1);
	.title {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 180px;
		height: 24px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.button {
		position: absolute;
		right: 30px;
		top: 30px;
		font-size: 25px;
		cursor: pointer;
	}
}
.nd-title2 {
	font-size: 18px;
	font-weight: 800;
	color: #333;
	position: absolute;
	right: 20%;
	top: 20%;
}
.nd-time {
	position: absolute;
	font-size: 25px;
	font-weight: 800;
	color: #FFFFFF;
	width: 130px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	background-color: #01DF01;
	right: 17%;
	top: 45%;
}
.table {
	position: absolute;
	padding-left: 10px;
	padding-right: 10px;
	bottom: 0%;
	width: 98%;
	height: 45%;
}
.reflesh {
	animation: reflesh 1000ms linear;
	animation-play-state: running;
}
@keyframes reflesh {
	0% {
		transform: rotate(0deg);
	}
	
	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>